<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import dayjs from "dayjs"
	const db = uniCloud.database();
	const listData = ref([]);
	const popup = ref(null);
	const formData = ref({
		description: "",
		picurl: {},
		classid: ""
	})
	// 提交按钮是否禁用
	const disabled = computed(() => {
		// description和classid存在且不是空对象
		if (formData.value.description && formData.value.classid && Object.keys(formData.value.picurl).length >
			0) {
			// 启用提交按钮
			return false
		} else {
			// 禁用提交按钮
			return true
		}
	})

	// 获取数据
	const getData = async () => {
		console.log("获取数据");

		// 临时表联表查询
		let wallTemp = db.collection("demo-wallpaper")
			.field("description,classid,picurl,createTime")
			.orderBy("createTime desc")
			.getTemp();

		let classTemp = db.collection("demo-classify")
			.field("_id,name")
			.getTemp()

		// 解构
		let {
			result: {
				errCode,
				data
			}
		} = await db.collection(wallTemp, classTemp)
			.field("description,picurl.url as url,classid.name as classname,createTime")
			.get();


		console.log(data);
		if (errCode == 0) {
			listData.value = data
		}
	}

	// 打开弹窗
	const handleAdd = () => {
		popup.value.open();
	}

	// 提交
	const onSubmit = async () => {
		// 加载
		uni.showLoading();
		// 添加
		let res = await db.collection("demo-wallpaper")
			.add(formData.value);
		// 提示
		uni.showToast({
			title: "发布成功",
			icon: "none"
		})
		onCancel();
		init();
		getData();
		console.log(res);
	}
	// 关闭弹窗
	const onCancel = () => {
		popup.value.close();
	}
	// 预览壁纸
	const preview = (url) => {
		uni.previewImage({
			urls: [url]
		})
	}
	// 清空弹窗
	const init = () => {
		formData.value = {
			description: "",
			picurl: {},
			classid: ""
		}
	}

	getData();
</script>
<template>
	<view class="layout">
		<view class="add" @click="handleAdd">
			<button size="mini" type="primary">添加</button>
		</view>
		<view class="list">
			<view class="item" v-for="item,index in listData" :key="item._id">
				<view class="left">
					<image :src="item.url" mode="aspectFill" @click="preview(item.url)"></image>
				</view>
				<view class="right">
					<!-- 描述 -->
					<view class="desc">{{item.description}}</view>
					<view class="classname">
						<text>
							{{item.classname[0]}}
						</text>

						<text>
							{{dayjs(item.createTime).format("MM-DD HH:mm")}}
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	<uni-popup ref="popup" border-radius="10px 10px 0 0" :is-mask-click="false">
		<view class="popupOut">

			<uni-file-picker v-model="formData.picurl" return-type="object"></uni-file-picker>

			<textarea placeholder="请输入壁纸描述" v-model="formData.description"></textarea>

			<uni-data-select collection="demo-classify" field="name as text,_id as value" where="status == true"
				orderby="_id desc" v-model="formData.classid" :clear="true" />

			<view class="group">
				<button type="primary" size="mini" @click="onSubmit" :disabled="disabled">提交</button>
				<button type="default" size="mini" @click="onCancel">取消</button>
			</view>

		</view>
	</uni-popup>

</template>
<style lang="scss" scoped>
	.layout {
		padding: 30rpx;

		.add {
			margin-bottom: 30rpx;
		}

		.list {
			.item {
				padding: 15rpx 0;
				border-top: 1px solid #eee;
				display: flex;

				.left {
					width: 200rpx;
					height: 200rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}
				}

				.right {
					flex: 1;
					padding-left: 30rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.desc {
						font-size: 30rpx;
						line-height: 1.6em;
					}

					.classname {
						font-size: 28rpx;
						color: #999;
						padding-top: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}
			}

			.item:last-child {
				border-bottom: 1px solid #eee;
			}
		}
	}

	.popupOut {
		width: 660rpx;
		background: #fff;
		border-radius: 10rpx;
		min-height: 400rpx;
		padding: 30rpx;
		box-sizing: border-box;

		textarea {
			border: 1px solid #efefef;
			padding: 10rpx;
			width: 100%;
			height: 150rpx;
			box-sizing: border-box;
			margin: 30rpx 0;
		}

		.group {
			padding-top: 60rpx;
			padding-bottom: 30rpx;
			gap: 30rpx;
			display: flex;

			button {
				width: 100%;
			}
		}
	}
</style>